<template>
  <div class="container">
    <!-- 筛选查询 -->
    <div class="search">
      <img class="searchImg" src="./image/search.png" alt="" />
      <span class="searchText">筛选查询</span>
    </div>

    <!-- 头部按钮 -->
    <div class="containerHeader">
      <!-- 下拉框 -->
      <el-form-item>
        <el-select placeholder="型体" style="width: 128px; height: 32px" />
      </el-form-item>

      <!-- 颜色名称 -->
      <el-form-item>
        <el-input placeholder="颜色名称" style="width: 180px; height: 32px; margin-left: 20px" />
      </el-form-item>

      <!-- 颜色代号 -->
      <el-form-item>
        <el-input placeholder="颜色代号" style="width: 180px; height: 32px; margin-left: 20px" />
      </el-form-item>

      <!-- 按钮 -->
      <el-button class="containerHeaderBtn" type="warning" size="default">查询</el-button>
      <el-button class="containerHeaderBtn" type="warning" size="default">清空</el-button>
      <el-button class="containerHeaderBtn" type="warning" size="default">导出</el-button>
      <el-button class="containerHeaderBtn" type="warning" size="default">导出BOM表</el-button>
    </div>

    <!-- 主体 -->
    <div class="containerMain">
      <!-- 左侧 -->
      <div class="containerMainLeft">
        <el-card class="containerMainLeftCard" shadow="always" :body-style="{ padding: '0' }">
          <!-- 型体 -->
          <div class="containerMainLeftHeader">
            <h1 class="containerMainLeftH1">型体</h1>
            <div class="containerMainLeftTable Body">
              <el-table :data="tableData" show-header>
                <el-table-column align="center" prop="date" />
                <!-- 其他列 -->
              </el-table>
            </div>
            <el-checkbox style="height: 20px; margin-top: 10px" label="全部" size="default">
              <span style="color: black; font-size: 13px">全部</span>
            </el-checkbox>
          </div>

          <!-- 全码用量资料 -->
          <div class="containerMainLeftMain">
            <h1 class="containerMainLeftH1">全码用量资料</h1>
            <div style="margin-top: 20px">
              <el-table :data="tableData1" border style="width: 100%">
                <el-table-column align="center" prop="date" show-overflow-tooltip label="颜色" width="70" />
                <el-table-column align="center" prop="name" show-overflow-tooltip label="颜色代号" width="90" />
              </el-table>
            </div>
          </div>

          <!-- 型体配色备注 -->
          <div class="containerMainLeftFooter">
            <h1 class="containerMainLeftH1">型体配色备注</h1>
            <el-form-item style="font-size: 9px; height: 15px; margin-top: 20px">
              <el-input type="textarea" style="width: 100%" min-height:120px></el-input>
            </el-form-item>
          </div>

          <!-- card body -->
        </el-card>
      </div>

      <!-- 右侧 -->
      <div class="containerMainRight" style="overflow: hidden">
        <el-card class="containerMainRightCard" shadow="always" :body-style="{ padding: '0' }">
          <!-- 头部表格 -->
          <div class="containerMainRightHeader" slot="header">
            <h1>型体颜色材料输入</h1>
            <div class="containerMainRightTable">
              <el-table class="table2" :data="tableData2" ref="multipleTableRef" height="325">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" width="69">
                  <template #default="scope">{{ scope.row.date }} </template>
                </el-table-column>
                <el-table-column align="center" property="name" label="部位" width="80" />
                <el-table-column align="center" property="address" label="分段" show-overflow-tooltip width="67" />
                <el-table-column align="center" property="address" label="材料编码" show-overflow-tooltip width="80" />
                <el-table-column align="center" property="address" label="材料颜色" show-overflow-tooltip width="80" />
                <el-table-column align="center" property="address" label="材料名称" show-overflow-tooltip width="80" />
                <el-table-column align="center" property="address" label="规格" show-overflow-tooltip width="67" />
                <el-table-column align="center" property="address" label="单位" show-overflow-tooltip width="76" />
                <el-table-column align="center" property="address" label="分类" show-overflow-tooltip width="67" />
                <el-table-column align="center" property="address" label="供应商" show-overflow-tooltip width="67" />
                <el-table-column align="center" property="address" label="尺码起" show-overflow-tooltip width="80" />
                <el-table-column align="center" property="address" label="尺码止" show-overflow-tooltip width="80" />
                <el-table-column align="center" property="address" label="用量" show-overflow-tooltip width="67"> </el-table-column>>
                <el-table-column align="center" property="address" label="计算方式" show-overflow-tooltip width="80">
                  <template #default="scope">
                    <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                  </template>
                </el-table-column>
                <el-table-column align="center" property="address" label="领用单位" show-overflow-tooltip width="80">
                  <template #default="scope">
                    <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                  </template>
                </el-table-column>

                <el-table-column align="center" property="address" label="号码类型" show-overflow-tooltip width="80">
                  <template #default="scope">
                    <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                  </template>
                </el-table-column>

                <el-table-column align="center" property="address" label="主辅料" show-overflow-tooltip width="67">
                  <template #default="scope">
                    <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                  </template>
                </el-table-column>

                <el-table-column align="center" property="address" label="备注" show-overflow-tooltip width="60" />
                <el-table-column align="center" type="selection" property="address" label="检料" show-overflow-tooltip width="70" />
              </el-table>
            </div>
          </div>

          <!-- 底部表格 -->
          <div class="containerMainRightFooter">
            <h1>贴合子材料明细</h1>
            <div class="containerMainRightFooterTable">
              <el-table class="table2" :data="tableData3" ref="multipleTableRef">
                <el-table-column align="center" property="name" label="材料编码" width="214" />
                <el-table-column align="center" property="address" label="材料颜色" show-overflow-tooltip width="222" />
                <el-table-column align="center" property="address" label="材料名称" show-overflow-tooltip width="370" />
                <el-table-column align="center" property="address" label="规格" show-overflow-tooltip width="63" />
                <el-table-column align="center" property="address" label="单位" show-overflow-tooltip width="67" />
                <el-table-column align="center" property="address" label="加工方式" show-overflow-tooltip width="173" />
                <el-table-column align="center" property="address" label="供应商" show-overflow-tooltip width="101" />
                <el-table-column align="center" property="address" label="比例" show-overflow-tooltip width="93" />
                <el-table-column align="center" type="selection" property="address" label="地址" show-overflow-tooltip width="95">
                  <template v-slot:header>是否请购 </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 分页器 -->
          <div class="bottom">
            <span class="total">共688项数据</span>
            <el-pagination
              :page-sizes="[10, 20, 30, 40]"
              layout="sizes, prev, pager, next, jumper"
              :total="600"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <div>
              <el-button class="save" type="primary" size="default" @click="">保存</el-button>
              <el-button type="primary" size="default" @click="">打印</el-button>
            </div>
          </div>
          <!-- card body -->
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'DevelopBom'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
// 左侧表格数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

// 中间表格数据
const tableData1 = [
  {
    date: '灰色',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '灰色',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '灰色',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '灰色',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const tableData2 = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
    // djsal:<el-dropdown><span class="el-dropdown-link"> Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
    // djsal:<el-dropdown><span class="el-dropdown-link"> Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
  }
]

const tableData3 = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style lang="less" scoped>
// 主体
.container {
  width: 100%;
  height: 800px;
}

// 筛选查询行
.search {
  height: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;

  .searchImg {
    width: 20px;
    height: 20px;
  }

  .searchText {
    font-size: 14px;
    font-family: PingFangSC-Medium-, PingFangSC-Medium;
    color: #666666;
    margin-left: 8px;
  }
}

// 头部
.containerHeader {
  width: 800px;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

// 下边主体
.containerMain {
  width: 100%;
  height: 800px;
  display: flex;
}

// 左侧型体
.containerMainLeft {
  width: 182px;
  height: 100%;
}

// 右侧型体颜色
.containerMainRight {
  width: 1600px;
  height: 100%;
  margin-left: 20px;
}

// 左侧Card
.containerMainLeftCard {
  width: 100%;
  height: 100%;
  box-shadow: none;
}

// 右侧Card
.containerMainRightCard {
  width: 100%;
  height: 100%;
  box-shadow: none;
}

// 按钮颜色
.containerHeaderBtn {
  background-color: #f89027;
  height: 23px;
  margin-top: 15px;
  margin-left: 15px;
}

// 型体
.containerMainLeftHeader {
  width: 90%;
  height: 220px;
  margin: auto;
}

// 全码用量资料
.containerMainLeftMain {
  width: 90%;
  height: 220px;
  margin: auto;
  margin-top: 20px;
}

// 型体配色备注
.containerMainLeftFooter {
  width: 90%;
  height: 220px;
  margin: auto;
  margin-top: 40px;
}

// 字体
.containerMainLeftH1 {
  font-size: 16px;
  margin-top: 13px;
}

// 表格左右边框
:deep(.el-table__body-wrapper .el-table__body .el-table__row > td) {
  border-right: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
}

// 纵向滚动条
:deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
  opacity: 1;
  width: 6px; // 纵向滑块的宽度
  border-radius: 2px;
  background-color: var(--el-color-primary);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.containerMainLeftTable {
  width: 100%;
}

// 影藏表头
:deep(.Body .el-table th.el-table__cell > .cell) {
  display: none;
}

:deep(.el-textarea__inner) {
  min-height: 150px !important;
}

// 型体颜色材料输入
.containerMainRightHeader {
  height: 400px;
  margin-left: 15px;

  h1 {
    font-size: 16px;
    margin-top: 13px;
  }
}

// 贴合材料明细
.containerMainRightFooter {
  width: 95%;
  height: 200px;
  margin-top: 20px;
  margin-left: 15px;

  h1 {
    font-size: 16px;
  }
}

// 型体颜色材料输入表格样式
.containerMainRightTable {
  width: 100%;
  height: 300px;
  margin-top: 20px;
}

// 底部
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  margin-left: 15px;
  width: 98%;
  margin-top: -30px;

  .total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
  }

  :deep(.el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input__suffix) {
    transform: translateX(-9px);
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 88px;
  }

  :deep(.number) {
    border: 1px solid #dcdcdc;
    margin-right: 8px;
    border-radius: 3px 3px 3px 3px;
  }

  :deep(.is-active.number) {
    background-color: #f89027 !important;
    color: white;
    border-radius: 3px 3px 3px 3px;
  }

  .save {
    color: black;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
  }
}

// 表格
.table2 {
  margin: 12px 0px 5px;

  :deep(.cell) {
    line-height: normal;
  }

  :deep(.el-table__cell:hover) {
    background-color: #fff5eb;
  }

  :deep(.el-table) {
    --el-table-row-hover-bg-color: white; // background-color: white;
  }

  // // 去掉表格单元格边框
  // :deep(.customer-table th) {
  //   border: none;
  // }

  // :deep(.customer-table td, .customer-table th.is-leaf) {
  //   border: none;
  // }
  :deep(.el-table__header .cell) {
    color: #191919;
  }

  :deep(.el-table__header-wrapper) {
    padding: 0;
  }

  // 表格最上面边框
  :deep(.el-table--border .el-table__inner-wrapper::after) {
    // left: 0;
    position: relative;
    // top: 0;
    // width: 100%;
    // height: 1px;
    // z-index: 3;
  }

  // 表格最外边框
  :deep(.el-table--border, .el-table--group) {
    border: none;
  }

  // 头部边框
  :deep(.customer-table thead tr th.is-leaf) {
    // border: 1px solid #EBEEF5;
    border-right: none;
  }

  // 左边边框
  :deep(.customer-table thead tr th:nth-last-of-type(2)) {
    border-right: none;
  }

  // 取消左侧头部边框
  :deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child) {
    border-left: none;
  }

  // 左侧体边框修改top
  :deep(.el-table__border-left-patch) {
    top: 40px;
    left: 0;
    width: 1px;
    height: 100%;
    z-index: 3;
    position: absolute;
    background-color: var(--el-table-border-color);
  }

  // 表格最外层边框-底部边框
  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.customer-table::before) {
    width: 0;
  }

  // 取消表格底部边框
  :deep(.el-table__inner-wrapper::before) {
    position: relative;
  }

  :deep(.customer-table .el-table__fixed-right::before, .el-table__fixed::before) {
    width: 0;
  }

  // 表格有滚动时表格头边框
  // :deep

  //  表格有滚动时表格头边框
  :deep(.el-table--border th.gutter:last-of-type) {
    border: 1px solid #ebeef5;
    border-left: none;
  }
}

:deep(.el-input) {
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: #fff;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: #fff;
  --el-input-focus-border-color: #fff;
  --el-input-clear-hover-color: #fff;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select) {
  --el-select-border-color-hover: #fff;
}
</style>
